<template>
  <div class="needshop" id="xdSearchWrap">
      <div class="sn-search">
          <div class="sn-se-inp">
            <i class="search-icon"></i>
            <input id="searchIup" v-model="text"  @keyup.13="sear()" type="text" class="searchInp" placeholder="搜索你想要的商品" value="">
            <i v-show="text.length>0" class="search-close" @click="text=''"></i>
          </div>
          <a id="searchBtn" href="javascript:void(0);" @click="sear()" class="search-btn">搜索</a>
      </div>

      <div class="search-wrap">
          <dl class="search-keywords">
              <dt class="s-hot"><span>热门搜索</span></dt>
            <dd class="keyword-list">
              <a v-for="(item, index) in hotdata" @click="sear({paramType: item.paramType, paramInfo: item.paramInfo})"><!-- href="/search/list.html?keyword=通子码小朋友" -->
                <i>
                  <p class="s-tit">{{item.paramInfo}}</p>
                </i>
              </a>
            </dd>
            <!--网络异常-->
            <dd class="keywords-err" style="display: none;">网络异常，您可以尝试
              <p class="err-r">
                <a href="javascript:;">重新加载</a>
              </p>
            </dd>
          </dl>
          <dl class="search-keywords" v-if="getshoplist.length > 0">
            <dt class="s-history"><span>搜索历史</span></dt>
            <dd class="keyword-list history-list">
              <a  v-for="(item,index) in getshoplist" @click="sear({paramInfo: item})">
                <i>
                  <p class="s-tit">{{item}}</p>
                </i>
              </a> 
            </dd>
            <!--网络异常-->
            <dd class="keywords-err" style="display: none;">网络异常，您可以尝试
              <p class="err-r">
                <a href="javascript:;">重新加载</a>
              </p>
            </dd>
            <a class="btn-delhis" href="javascript:;" @click="clearshoplist">
              清空历史搜索
            </a>
          </dl>
    </div>
<!--     <div class="mask" v-show="showmask" @touchstart.prevent="">
        <div class="mask-button-box">
            <div class="mask-info">
                清空历史记录
            </div>
            
            <div class="mask-button">
                <div @click="close1()">取消</div>
                <div @click="sure1()">确定</div>
            </div>
        </div>
    </div> -->
  </div>
</template>

<script>
  import {mapMutations, mapState, mapGetters} from 'vuex'
  import {  SearchInfo, hotsearch } from '@/service/getData' 
  export default {
     data(){
        return {
          text: "",
          histroydata: '一小时达',
          hotdata:[]
        }
     },
     computed:{
        ...mapGetters([
            'getshoplist'
        ])

     },
     created(){
        var num = 2;
        if(this.$route.params.num || this.$route.params.num == 0){
          num = this.$route.params.num
        }
        SearchInfo({
          num: num,
          _: Math.random()+10000000 
        })
        .then((json) => {
          if(json.resultData && json.resultData[0]){
            this.text = json.resultData[0].paramInfo

            $('#searchIup')[0].focus();
          }
          return;
          
        });

        hotsearch({
            _: Math.random()+10000000
        })
        .then((json) => {
          if(json.resultData){
              this.hotdata = json.resultData.slice(0,9);
          }
        })
     },
     methods:{
        go: function() {
          this.$router.go(-1);
        },
        sear(val){

            if(toString.call(val) == "[object Object]") {
              this.text = val.paramInfo
            }//当a连接点击的时候
             
            this.$store.dispatch('setshoplist',{
                text1: this.text
            }); 
            this.$store.dispatch('setshoplistNow',{
                text1:this.text
            });
            // this.$router.replace('/shoplist/search')
            this.$router.replace('/searchshoplist')
      
        },
        clearshoplist (){
           var that = this
            AlertBox({
               type:'doubleBtn',
               msg:'确定清空搜索记录',
               confirmText:"确定",
               cancelText :'取消',
               alertType:'fixed',
               confirm:function(){
                   that.$store.dispatch('clearshoplist');
               }
           })
        }
     }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
   .sn-search {
      position: relative;
      height: 1.76rem;
      padding: .28rem .56rem;
      background-color: #fff;
      border-bottom: 1px solid #e7e7e7;
  }
  .sn-search .sn-se-inp {
    position: relative;
    background-color: #F6F6F5;
    border-radius: 1.2rem;
    margin-right: 1.76rem;
    height: 1.2rem;
    padding: .2rem .2rem .2rem 1.12rem;
  }
  .sn-search .sn-se-inp .search-icon {
      display: inline-block;
      position: absolute;
      left: .4rem;
      top: 50%;
      -webkit-transform: translateY(-50%);
      width: .56rem;
      height: .56rem;
      background:url() 0 center no-repeat;
      background-size: contain;
  }
  .sn-search .sn-se-inp input {
    width: 100%;
    height: .8rem;
    border: none;
    background: none;
    color: #333;
  }
  .sn-search .search-btn {
      display: inline-block;
      position: absolute;
      top: .28rem;
      right: .56rem;
      height: 1.2rem;
      line-height: 1.2rem;
      font-size: .6rem;
      color: #ff782d;
  }
  .search-wrap {
    padding: .56rem 0;
  }
  .search-wrap .search-keywords {
    overflow: hidden;
    margin-bottom: .8rem;
    background-color: #fff;
  }

  .search-wrap .search-keywords dt {
      font-size: .44rem;
      color: #999;
  }
  .search-wrap .search-keywords dt span {
    display: block;
    line-height: 1px;
    border-left: .96rem solid #ff782d;
    border-right: .96rem solid #ff782d;
    padding: 0 .1rem 0;
    text-align: center;
    margin: .72rem auto;
    width: 4.2rem;
    color: #ff782d;
}
  .search-wrap .search-keywords .s-history span {
    color: #ffb300;
    border-left: .96rem solid #ffb300;
    border-right: .96rem solid #ffb300;
    font-size: .48rem;
}
.search-wrap .search-keywords .keyword-list {
    overflow: hidden;
    margin-right: -.4rem;
}
 
 
.search-wrap .search-keywords .keyword-list a {
    display: inline-block;
    float: left;
    width: 4.36rem;
    height: 1.12rem;
    margin: 0 0.3rem 0.3rem;
    padding: 0 .4rem;
    background-color: #f9f9f9;
    font-size: .52rem;
    border-radius: .08rem;
    text-align: center;
    overflow: hidden;
    display: table;
}
.search-wrap .search-keywords .keyword-list a i {
    display: table-cell;
    vertical-align: middle;
}
.search-wrap .search-keywords .keyword-list a .s-tit {
    font-size: .52rem;
    color: #666;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 auto;
    width: 3.1rem;
}
.search-wrap .search-keywords .keyword-list a p {
    font-size: .44rem;
    color: #bbb;
}
.search-wrap .search-keywords .keywords-err {
    text-align: center;
    line-height: .6rem;
    font-size: .52rem;
    margin: 1.2rem 0 .8rem;
    height: auto;
}
.search-wrap .search-keywords .keywords-err .err-r {
    margin-top: .5rem;
}
.search-wrap .search-keywords .btn-delhis {
    display: block;
    text-align: center;
    color: #999999;
    border-top: 1px solid #F7F7F7;
    height: 1.44rem;
    line-height: 1.44rem;
}
 
.search-wrap .search-keywords .btn-delhis:before {
    content: '';
    display: inline-block;
    width: .56rem;
    height: .56rem;
    background: url() 0 0 no-repeat;
    background-size: contain;
    vertical-align: -2px;
    opacity: 0.6;
}
.needshop .mask {
  z-index: 11;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.08);
}
.needshop .mask .mask-button-box {
    width: 80%;
    height: 4.5rem;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -40%;
    margin-top: -2.5rem;
    z-index: 111;
}
.needshop .mask .mask-button-box .mask-info {
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.needshop .mask .mask-button>div {
  line-height: 1.5rem;
  width: 50%;
  float: left;
  text-align: center;
}
.needshop .mask .mask-button>div:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.needshop .mask .mask-button>div:last-child {
  color: #ffb300;
}
.search-close {
  width: 0.85rem;
  height: 0.85rem;
  background-image: url('/static/images/close1.png');
  background-size: 105% 105%;
  position: absolute;
  right: 0.4rem;
  top: 0.15rem;
}
</style>
